<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
	<META http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<TITLE>Ajax Tabs Demo</TITLE>

	<link rel="stylesheet" type="text/css" href="../jquery/development-bundle/themes/base/jquery.ui.all.css" />
	<LINK rel="stylesheet" type="text/css" href="../libs/layout-default-latest.css">
	<STYLE type="text/css">

	/*
	 *	REQUIRED pane & wrapper styles
	 *	this code removes padding and borders from all elements that need it
	 */
	#page_header,				/* this pane has a header & content-div, so should not have padding or scrolling */
		#tabs,					/* wrapper for tabs widget */
			#tab_buttons,		/* tab-buttons wrapper (center-north) */
			#tab_panels,		/* tab-panels  wrapper (center-center) */
				.tab-panel {	/* individual tab-panels */
					border:		none;
					padding:	0 !important; /* override UI theme for tab-panels */
					overflow:	hidden;
				}
				.tab-panel {	/* individual tab-panels */
					/* make ALL tab-panels FILL the #tab_panels wrapper */
					width:		100%;
					height:		100%;
				}
				#tab_buttons span.ui-icon { /* (x) close icons/buttons inside the tabs */
					margin-right:	-7px;
					vertical-align:	middle;
					display:		inline-block;
					cursor:			pointer;
				}
	/*
	 *	COSMETIC styling - not required
	 */
	#page_header h3 {
		padding:	5px 15px;
		margin:		0;
	}
	#page_header div.toolbar {
		padding:	3px 10px;
		}
		#page_header .toolbar button {
			padding:	5px 15px;
		}
	/*
	 *	styles for layouts & elements inside tab-panels
	 */
	.tab-panel .ui-layout-north {
		border-width:	0 0 1px;
		overflow:		hidden;
	}
	.tab-panel .ui-layout-center {
		border-width:	1px 0 0;
		padding:		0;
		overflow:		hidden;
		}
		.tab-panel .ui-layout-center .ui-widget-content {
			padding:	10px 15px;
			overflow:	auto;
		}
		.tab-panel H4 ,
		.tab-panel H5 {
			padding:	10px 15px;
			margin:		0;
		}

	</STYLE>

    <script type="text/javascript" src="../libs/jquery-latest.js"></script>
    <script type="text/javascript" src="../libs/jquery-ui-latest.js"></script>
    <script type="text/javascript" src="../libs/jquery.layout-latest.js"></script>
    <script type="text/javascript" src="../libs/resizeTabLayout.js"></script>
    <SCRIPT type="text/javascript" src="../libs/themeswitchertool.js"></SCRIPT> 
	<SCRIPT type="text/javascript" src="../libs/debug.js"></SCRIPT>
	<SCRIPT type="text/javascript">

	// global vars for layouts and tabs - for convenience
	var pageLayout, tabsLayout, $Tabs;
	var newTabCounter = 1;

	// options for the layout generated _inside_ the tab(s)
	var tabLayoutOptions = {
		resizeWithWindow:			false // *** IMPORTANT *** tab-layouts must NOT resize with the window
	,	center__contentSelector:	".ui-widget-content"
	};


	// onClick event of the Add New Tab button
	function add_tab () {
		$Tabs.tabs( "add", "tabs_ajax_new_tab.html", "Tab "+ (++newTabCounter) );
		//$Tabs.tabs( "add", "#newTabId", "Tab "+ (++newTabCounter) );
		
	};

	// bound to 'X' icon inside NEW tab-buttons
	function remove_tab (evt) {
		if ( confirm("Close this tab?") ) {
			var	idx = $(this).closest("li").index();
			$Tabs.tabs("remove", idx);
		}
	};


	$(document).ready(function(){

		// init the Page Layout
		pageLayout = $("body").layout({ 
			resizable:				false
		,	closable:				false
		,	spacing_open:			0
		,	north__paneSelector:	"#page_header"	// page header
		,	center__paneSelector:	"#tabs"			// tabs-wrapper
		});

		// init the Tabs-Wrapper layout inside the center-pane of the pageLayout
		tabsLayout = pageLayout.panes.center.layout({
			resizable:				false
		,	closable:				false
		,	spacing_open:			0
		,	north__paneSelector:	"#tab_buttons"	// tab-buttons
		,	center__paneSelector:	"#tab_panels"	// tab-panels-wrapper
		,	center__onresize:		$.layout.callbacks.resizeTabLayout // resize 'visible tab layout' if pane resizes
		});

		$Tabs = $("#tabs").tabs({
		//	use a tab-button template so we can add a close (X) button/icon
			tabTemplate:	'<LI><A href="#{href}">#{label}  <SPAN class="ui-icon ui-icon-close"></SPAN></A></LI>'
		//	use a tab-template template so we can add our own class, and hide it temporarily
		,	panelTemplate:	'<DIV class="tab-panel ui-tabs-hide"></DIV>'
		,	idPrefix:		"tab_panel_" // prefix for auto-generated ID for panel - eg: "tab_panel_3"
		//	load Ajax tabs only once - when it is created
		,	cache:			true

		//	runs after widget generates a new tab-button and tab-panel
		,	add: function (evt, ui ) { 
				// DISABLE the tabs until we are done adding & loading this tab to avoid issues
				$Tabs.tabs("disable"); // will enable in tabs.load method
				// MOVE the auto-generated panel inside the panels-wrapper DIV
				$( ui.panel ).appendTo( "#tab_panels" );
				// bind the ui-icon-close in the tab (see template above) so it is functional
				$( ui.tab ).find(".ui-icon-close").click( remove_tab ).attr("title","Close This Tab");
				// resize tabs-layout in case tabs now wrap to another line
			 	$Tabs.layout().resizeAll();
				// automatically select the newly added tab
				$Tabs.tabs( "select", ui.index );
			}

		//	runs after widget removes a tab
		,	remove: function (evt, ui ) { 
				// resize tabs-layout in case tabs no longer wrapped to another line
			 	$Tabs.layout().resizeAll();
			}

		//	runs after a tab is made visible - but before Ajax content is loaded
		//	this will also run when the tabs widget initializes - and the first tab-panel is shown
		,	show: $.layout.callbacks.resizeTabLayout // resize the layout inside tab - if one exists

		,	show_ALTERNATE: function (evt, ui) {
				// resize inner tab-layout(s), if are any
				$.layout.callbacks.resizeTabLayout(evt, ui);
				// resize Accordion(s), if are any
				// REQUIRES the jquery.layout.resizePaneAccordions.xx.js callback loaded
				//$.layout.callbacks.resizePaneAccordions(evt, ui);
			}

		//	runs after widget finishes loading Ajax content into a tab
		,	load: function (evt, ui ) { 
				// look for layout-options data on the *first element* of the injected content
				// this trick could also be used to trigger initialization of other widgets, like tabs or accordions
				var $panel		= $( ui.panel )
				// see if data exists AND that there is an object with that name
				,	optsName	= $panel.children(":first").data("layout_options") // eg: "tabLayoutOptions"
				,	options		= window[ optsName ]
				;
				// if layout options found, then init the layout with these options
				if (options)
					$panel.layout( options );
				// now re-enable the tabs widget - loading has completed
				$Tabs.tabs("enable");
			}

		//	runs after widget is created and the first tab is shown
		,	create: function (evt, ui ) { 
				// create the layout inside the first tab
				$("#first_panel").layout( tabLayoutOptions );
			}

		});

		// resize the tabsLayout after creating the tabs to fit the tabs precisely
		tabsLayout.resizeAll();


		// UI Theme Selector - for development testing only
		addThemeSwitcher('#page_header',{ top: '43px', right: '15px' });
		// if a theme is applied by ThemeSwitch *onLoad*, it may change the height of some content,
		// so we need to call resizeLayout to 'correct' any header/footer heights affected
		// call multiple times so fast browsers update quickly, and slower ones eventually!
		// NOTE: this is only necessary because we are changing CSS *AFTER LOADING* (eg: themeSwitcher)
		setTimeout( pageLayout.resizeAll, 1000 ); /* allow time for browser to re-render for theme */
		setTimeout( pageLayout.resizeAll, 5000 ); /* for really slow browsers */
	});

	</SCRIPT>
</HEAD>
<BODY>

<DIV id="page_header">
	<H3 class="ui-state-active"> Page Header </H3>
	<DIV class="toolbar ui-widget-content">
		<BUTTON onClick="add_tab()">Add New Tab</BUTTON> &nbsp;
		<BUTTON onClick="removeUITheme()">Remove UI Theme</BUTTON> 
	</DIV>
</DIV>

<DIV id="tabs">
	<DIV id="tab_buttons">
		<UL> 
			<LI><A href="#first_panel">Tab 1</A></LI> 
		</UL>
	</DIV>
 	<!-- center-pane with dynamic added tab-panels --> 
	<DIV id="tab_panels">

		<DIV id="first_panel" class="tab-panel ui-tabs-hide"> 
			<DIV class="ui-layout-north ui-widget-content"> Tab 1 North </DIV> 
			<DIV class="ui-layout-center"> 
				<H4 class="ui-state-default"> Tab 1 - Center - Header </H4>
				<DIV class="ui-widget-content">
					Tab 1 - Center - Content
				</DIV>
				<H5 class="ui-state-default"> Tab 1 - Center - Footer </H5>
			</DIV> 
		</DIV> 

	</DIV>
</DIV> 

</BODY>
</HTML>